<template>
	<view class="page-container back-grey-light">
		<!-- 收货地址 -->
		<view class="pcol-base prow-lg mb-base back-white col-box">
			<text class="s24 grey-light mb-base">我的地址</text>
			<view class="row-box sb" @click="goMyAddress()">
				<view class="col-box">
					<text class="s32 bold mb-base">{{ order.addressOrderInfoVo.schoolName+' '+order.addressOrderInfoVo.detailAdd }}</text>
					<view class="row-box">
						<text class="mr-l">{{  order.addressOrderInfoVo.name }}</text>
						<text>{{  order.addressOrderInfoVo.tel }}</text>
					</view>
				</view>
				<u-icon name="arrow-right" color="#999" size="36"></u-icon>
			</view>
		</view>
		<!-- 配送时间 -->
		<view class="pcol-base prow-lg mb-base back-white row-box sb">
			<view class="row-box">
				<text class="bold pcol-base">配送时间：</text>
				<view class="row-box sb pcol-base">
					<text class="primary mr-10">08:00</text>
					<u-icon name="edit-pen" color="#999" size="28"></u-icon>
				</view>
			</view>
			<view class="row-box">
				<text>预计送达时间：</text>
				<text class="primary">08:45</text>
			</view>
		</view>
		<!-- 商品列表 -->
		<view class="pcol-base prow-lg mb-base back-white col-box">
			<text class="bold pcol-base">{{ order.merchantName }}</text>
			<view style="border-bottom: 1rpx solid #f0f0f0;">
				<view	v-for="(item, index) in order.goodsLists" :key="index" class="pcol-base goods-item">
					<image class="radius-l image" :src="item.img" mode="aspectFill"></image>
					<view class="col-box">
						<text class="mb-10">{{ item.name }}</text>
						<text class="s24 grey-light">{{ item.attNames?(item.spName+'，'+item.attNames):item.spName }}</text>
					</view>
					<view class="col-box right">
						<text class="mb-10">￥{{ moneyFormat(item.price, 2) }}</text>
						<text class="s24 grey-light">x {{ item.num }}</text>
					</view>
				</view>
			</view>
			<view class="pcol-l extra-box">
				<text class="grey-dark">备注</text>
				<view class="content-box">
					<text class="s24 grey-dark right">鸡肉切块，加热</text>
					<view class="row-box center" style="height: 40rpx;">
						<u-icon name="arrow-right" color="#999" size="26"></u-icon>
					</view>
				</view>
			</view>
			<view class="pcol-l extra-box">
				<text class="grey-dark">餐具</text>
				<view class="content-box">
					<text class="s24 grey-dark right">2份</text>
					<view class="row-box center" style="height: 40rpx;">
						<u-icon name="arrow-right" color="#999" size="26"></u-icon>
					</view>
				</view>
			</view>
			<view class="row-box sb pcol-l">
				<text class="grey-dark">餐盒费</text>
				<text class="s24 grey-dark">￥{{ moneyFormat(order.boxPrice, 2) }}</text>
			</view>
			<view class="row-box right end pcol-l">
				<text class="s24 grey-light mr-10" style="line-height: 28rpx;">小计</text>
				<text class="s32 bold grey-dark" style="line-height: 28rpx;">￥{{ moneyFormat(order.payPrice, 2) }}</text>
			</view>
		</view>
		
		<!-- 底部确认按钮 -->
		<view class="pall-l order-submit-area">
			<view class="order-submit">
				<view class="price-box row-box">
					<view class="row-box end">
						<text class="s32 white mr-base" style="line-height: 28rpx;">￥{{ moneyFormat(order.payPrice, 2) }}</text>
						<text class="s24 white" style="line-height: 28rpx;">（打包费：￥{{ moneyFormat(order.boxPrice, 2) }}）</text>
					</view>
				</view>
				<view class="button back-primary row-box center">
					<text class="s32 white">确认下单</text>
				</view>
			</view>
		</view>
		
		<!-- 餐具选择器 -->
	</view>
</template>

<script>
import { setTimeout } from 'timers';
	export default {
		data() {
			return {
				id: '', // 店铺id
				order: {
					"boxPrice":0.01,
					"payPrice":0.04,
					goodsLists: [{
						"id":null,
						"name":'新鲜盐焗鸡',
						"img":null,
						"price":0.01,
						"num":1,
						"spId":49,
						"spName":"默认规格",
						"attrItemList":null,
						"attNames":'不辣'
				},{
						"id":null,
						"name":'新鲜盐焗鸡',
						"img":null,
						"price":0.01,
						"num":1,
						"spId":49,
						"spName":"默认规格",
						"attrItemList":null,
						"attNames":'不辣'
				}]
				}, // 订单信息
			};
		},
		onLoad(options) {
			this.id = options.id
			// 获取提交订单的信息
			this.getOrderInfo(JSON.parse(options.cart))
		},
		methods: {
			// 跳转我的地址
			goMyAddress() {
				uni.navigateTo({
					url: '/pages/subPackage/user/my_address/my_address'
				})
			},
			
			// 获取提交订单的信息
			getOrderInfo(cart) {
				this.$api.GetOrderInfo({
					merchantId: this.id,
					goodsList: cart
				}).then(res => {
					console.log('GetOrderInfo-success', res)
					if (res.data.code === 200) {
						this.order = res.data.data
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg,
							success: () => {
								setTimeout(() => {
									uni.navigateBack()
								}, 300)
							}
						})
					}
				}).catch(err => {
					console.log('GetOrderInfo-fail', err)
				})
			},
		},
	}
</script>

<style lang="scss">
	.page-container {
		padding-bottom: 120rpx;
	}
	// 商品项
	.goods-item {
		display: grid;
		grid-template-columns: 130rpx 1fr 100rpx;
		column-gap: 24rpx;
		align-items: flex-start;
		
		.image {
			width: 130rpx;
			height: 130rpx;
		}
	}
	// 额外内容
	.extra-box {
		display: grid;
		grid-template-columns: 130rpx 1fr;
		column-gap: 24rpx;
		align-items: flex-start;
		.content-box {
			display: grid;
			grid-template-columns: 1fr 28rpx;
			column-gap: 24rpx;
			align-items: flex-start;
			justify-content: right;
		}
	}
	
	// 底部订单提交区域
	.order-submit-area {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 98;
		.order-submit {
			height: 96rpx;
			border-radius: 54rpx;
			display: grid;
			grid-template-columns: 1fr 196rpx;
			.price-box {
				box-sizing: border-box;
				width: 100%;
				height: 100%;
				border-radius: 54rpx 0 0 54rpx;
				padding: 0 32rpx;
				background: #333333;
			}
			.button {
				border-radius: 0 54rpx 54rpx 0;
			}
		}
	}
</style>
